
<!-- HTML版本声明，声明本html文件是HTML5 -->
<!DOCTYPE html>


<!-- html标签是页面的根标签 -->
<html lang="en">

<!-- head标签是页面头标签，用于设置页面的信息 -->
<head>
    <!-- title标签， 设置页面标题 -->
    <title>风车</title>

    <!-- style标签， 用于编写页面的css -->
    <style>

        /* #表示id选择器， #xxx  表示选择页面中id属性值为xxx 的元素。 */
        #container{
            width: 1600px;
            height: 800px;
            /* background-color: #FF0000; */

            /* 设置元素的边框 */
            border: solid 2px black;
            
            /* 设置元素的背景图片 */
            background-image: url(caodi.png);
            /* 设置背景图片的尺寸，100%表示图片的尺寸是元素尺寸的100% */
            background-size: 100% 100%;

            /* 将容器设置为相对定位，这样绝对定位的子元素就能相对自己进行定位 */
            position: relative;
        }

        /* .表示class选择器，.xxx 选择页面中class值包含xxx的元素。 */
        .pic{
            /* 将元素的定位方式改为 绝对定位，这样就可以用过坐标设置元素的位置 */
            position: absolute;

            /* 设置动画名字 */
            animation-name: spin;

            /* 设置动画时间 */
            animation-duration: 6000ms;

            /* 设置动画执行次数 */
            animation-iteration-count: infinite;

            /* 设置动画速率曲线 */
            animation-timing-function: linear;
        }

        #f1{
            width: 400px;
            height: 400px;
            left:342px;
            top: 180px;
        }
        #f2{
            width: 200px;
            height: 200px;
            left: 720px;
            top: 475px
        }
        #f3{
            width: 300px;
            height: 300px;
            left: 900px;
            top: 350px;
        }

        /* 创建关键帧动画 */
        @keyframes spin{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }

        /* hover伪类，当鼠标指针悬停在元素上时触发 */
        #f1:hover{
            /* border: solid 1px black; */
            animation-duration: 1s;
        }

        #f2:hover{
            /* 通话播放状态，默认值为running，设置为paused表示暂停 */
            animation-play-state: paused;
        }

        #f3:hover{
            /* 设置动画播放的方向 */
            animation-direction: reverse;
        }

    </style>

</head>

<!-- body，页面主体标签，用于设置页面中的内容。 -->
<body>


    <div id="container">

        <!-- img标签，用于显示一张图片，其中src属性表示图片的地址。 -->
        <img id="f1" class="pic" src="fengche.png">
        <img id="f2" class="pic" src="fengche.png">
        <img id="f3" class="pic" src="fengche.png">

        
    </div>


    
</body>
</html>